<template>
  <view class="product-detail-page">
    <!-- 商品图片区域 -->
    <view class="product-image-section">
      <view class="image-container">
        <swiper 
          class="swiper" 
          :indicator-dots="true" 
          :autoplay="false"
          :duration="300"
          @change="onSwiperChange"
          indicator-color="rgba(255, 255, 255, 0.5)"
          indicator-active-color="#ED6567"
        >
          <swiper-item v-for="(image, index) in productImages" :key="index">
            <image 
              :src="image" 
              :alt="product.title" 
              mode="aspectFill"
              class="product-image"
            />
          </swiper-item>
        </swiper>
        <!-- 指示器 -->
        <view class="image-indicator">{{ currentImageIndex + 1 }}/{{ productImages.length }}</view>
      </view>
    </view>

    <!-- 价格和基本信息 -->
    <view class="price-info-section">
      <view class="price-row">
        <view class="price-group">
          <text class="current-price">¥{{ product.currentPrice }}</text>
          <text class="original-price">¥{{ product.originalPrice }}</text>
        </view>
        <view class="share-btn" @click="shareProduct">
          <text class="iconfont-v2 icon-fenxiang"></text>
          <text class="share-text">分享</text>
        </view>
      </view>
      
      <view class="product-tags">
        <text class="tag special-offer">特价商品</text>
        <text class="tag free-shipping">包邮</text>
      </view>
    </view>

    <!-- 商品标题 -->
    <view class="product-title-section">
      <text class="product-title">{{ product.title }}</text>
    </view>

    <!-- 优惠券区域 -->
   <view class="coupon-section">
      <view class="section-header">
        <text class="section-title">领券</text>
		<view class="coupon-list">
		   <view class="coupon-item" v-for="(coupon, index) in coupons" :key="index" @click="getCoupon(coupon)">
		     <text class="coupon-text">{{ coupon.text }}</text>
		   </view>
		 </view>
        <text class="iconfont-v2 icon-youjiantou more-arrow"></text>
      </view>
     <!-- <view class="coupon-list">
        <view class="coupon-item" v-for="(coupon, index) in coupons" :key="index" @click="getCoupon(coupon)">
          <text class="coupon-text">{{ coupon.text }}</text>
        </view>
      </view> -->
    </view>
    <!-- 服务保障 -->
    <view class="service-section">
		
      <view class="section-header">
			
      
		<text class="section-title">说明</text>
		
		<view class="service-list">
			<view class="service-item" v-for="(service, index) in services" :key="index">
			  <text class="iconfont-v2 icon-dagou service-icon"></text>
			  <text class="service-text">{{ service }}</text>
			</view>
		</view>
		<text class="iconfont-v2 icon-youjiantou more-arrow"></text>
	  </view>
    </view>

    <!-- 用户评论 -->
    <view class="comments-section">
      <view class="section-header">
        <text class="section-title">留言 ({{ comments.length }})</text>
        <text class="view-all" @click="viewAllComments">查看全部 <text class="iconfont-v2 icon-youjiantou"></text></text>
      </view>
      <view class="comments-list">
        <view class="comment-item" v-for="(comment, index) in displayComments" :key="index">
			<view class="comment-user">
			  <view class="comment-avatar">
				<image :src="comment.avatar" :alt="comment.username" />
			  </view>
			  <!-- <view class="comment-header"> -->
			    <text class="username">{{ comment.username }}</text>
			    <text class="comment-date">{{ comment.date }}</text>
			  <!-- </view> -->
			</view>  
			<view class="comment-content">
			    <view class="comment-text">{{ comment.content }}</view>
			</view>
        </view>
      </view>
    </view>

    <!-- 图文详情 -->
    <view class="detail-section">
      <view class="section-header">
        <text class="section-title">图文详情</text>
        <!-- <text class="iconfont-v2 icon-youjiantou more-arrow"></text> -->
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <button class="add-cart-btn" @click="addToCart">
        <text class="iconfont-v2 icon-tianjia btn-icon"></text>
        <text class="btn-text">加入购物车</text>
      </button>
      <button class="buy-now-btn flex-center" @click="buyNow">立即购买</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品信息
      product: {
        id: 1,
        title: "露安适植物亲肤手洗洗衣液700ml 1瓶装露安适植物亲肤手洗洗衣液700ml 1瓶装",
        currentPrice: "89",
        originalPrice: "120",
        image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
      },

      // 商品图片数组
      productImages: [
        "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg",
        // "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
      ],

      // 当前图片索引
      currentImageIndex: 0,

      // 优惠券
      coupons: [
        { id: 1, text: "满200减20" },
        { id: 2, text: "满200减20" }
      ],

      // 服务保障
      services: [
        "捣蛋熊发货&售后",
        "极速退款",
        "极速达",
        "满99元包邮"
      ],

      // 用户评论
      comments: [
        {
          id: 1,
          username: "小小美女",
          date: "2020-02-14",
          content: "宝宝每次吃饭衣服都会弄上污渍,用它洗了之后就像新买的一样,去污能力强,值得购买,且价格优惠。",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 2,
          username: "慧慧妈妈",
          date: "2020-02-14",
          content: "非常不错,值得拥有",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 3,
          username: "购物达人",
          date: "2020-02-13",
          content: "质量很好，包装精美，物流很快，推荐购买！",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 4,
          username: "生活家",
          date: "2020-02-12",
          content: "性价比很高，用起来很舒服，会回购的。",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        }
      ]
    }
  },
  computed: {
    // 计算属性：显示的评论（只显示前2条）
    displayComments() {
      return this.comments.slice(0, 2);
    }
  },
  methods: {
    // swiper切换事件
    onSwiperChange(e) {
      this.currentImageIndex = e.detail.current;
    },

    shareProduct() {
      console.log("分享商品");
      uni.showToast({
        title: "分享功能开发中...",
        icon: 'none'
      });
    },

    getCoupon(coupon) {
      console.log("领取优惠券:", coupon);
      uni.showToast({
        title: `已领取优惠券：${coupon.text}`,
        icon: 'success'
      });
    },

    viewAllComments() {
      console.log("查看全部评论");
      uni.navigateTo({
        url: '/pages/fast/product-review'
      });
    },

    addToCart() {
      console.log("加入购物车");
      uni.showToast({
        title: "商品已加入购物车！",
        icon: 'success'
      });
    },

    buyNow() {
      console.log("立即购买");
      uni.showToast({
        title: "跳转到购买页面...",
        icon: 'none'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 160rpx; // 为底部操作栏留出空间
}

/* 商品图片区域 */
.product-image-section {
  background: white;
  
  .image-container {
    position: relative;
    width: 100%;
    height: 600rpx;
    overflow: hidden;
    background: #f8f9fa;
    
    .swiper {
      width: 100%;
      height: 100%;
      
      .product-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .image-indicator {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 8rpx 16rpx;
      border-radius: 24rpx;
      font-size: 24rpx;
      z-index: 10;
    }
  }
}

/* 价格和基本信息 */
.price-info-section {
  background: white;
  padding: 40rpx;
  //border-bottom: 2rpx solid #f0f0f0;
  
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .price-group {
      display: flex;
      align-items: center;
      gap: 20rpx;
      
      .current-price {
        font-size: 48rpx;
        font-weight: bold;
        color: #e74c3c;
      }
      
      .original-price {
        font-size: 32rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
    
    .share-btn {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 16rpx 24rpx;
      //background: #f8f9fa;
      border-radius: 40rpx;
      cursor: pointer;
      transition: background-color 0.2s ease;
      
      &:hover {
        background: #e9ecef;
      }
      
      .share-icon {
        font-size: 28rpx;
      }
      
      .share-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
  
  .product-tags {
    display: flex;
    gap: 16rpx;
    
    .tag {
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-weight: 500;
      
      &.special-offer {
        background: #F83D3D;
        color: #FFFFFF;
        border: 2rpx solid #ffcccc;
      }
      
      &.free-shipping {
        //background: #fff0f5;
        color: #e91e63;
        border: 2rpx solid #ffb3d1;
      }
    }
  }
}

/* 商品标题 */
.product-title-section {
  background: white;
  padding: 0rpx 40rpx 40rpx 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .product-title {
    font-size: 32rpx;
    line-height: 1.5;
    color: #333;
    margin: 0;
    font-weight: 500;
  }
}

/* 通用区块样式 */
.coupon-section,
.service-section,
.comments-section,
.detail-section {
  background: white;
  margin-top: 20rpx;
  padding: 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
  
  .section-header {
    display: flex;
    // justify-content: space-between;
	justify-content: flex-start;
    align-items: center;
    margin-bottom: 30rpx;
    
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
    }
    
    .more-arrow {
      font-size: 28rpx;
      color: #999;
    }
    
    .view-all {
      font-size: 28rpx;
      color: #999;
      cursor: pointer;
      
      &:hover {
        color: #d55a5c;
      }
    }
  }
}

/* 优惠券区域 */
.coupon-section {

	padding: 20rpx 40rpx;
	.section-header {
	  margin-bottom: 0rpx;
	  justify-content: flex-start;
	  .section-title{
	  	color:#999999;
	  }
	  .more-arrow{
	  	margin-left: auto;
	  }
	}
  .coupon-list {
    display: flex;
    gap: 20rpx;
    overflow-x: auto;
	margin-top: 0rpx;
	justify-content :flex-start;
    
    .coupon-item {
      flex-shrink: 0;
      // padding: 16rpx 32rpx;
	  padding: 8rpx 16rpx;
      border: 2rpx solid #e74c3c;
      border-radius: 40rpx;
      background: white;
      cursor: pointer;
      transition: all 0.2s ease;
	  
      &:hover {
        background: #ffe6e6;
      }
    
      .coupon-text {
        font-size: 28rpx;
        color: #e74c3c;
        font-weight: 500;
      }
    }
  }
  //padding: 5rpx 10rpx;
}

/* 服务保障 */
.service-section {
	margin-top:0rpx;
	.section-header {
		align-items: baseline;
	  .section-title{
	  	color:#999999;
		white-space: nowrap;
	  }
	  .more-arrow{
	  	margin-left: auto;
	  }
	
	}
  .service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    padding: 0rpx 20rpx;
    .service-item {
      display: flex;
      align-items: center;
      gap: 16rpx;
      
      .service-icon {
        color: #e74c3c;
        font-size: 28rpx;
        font-weight: bold;
      }
      
      .service-text {
        font-size: 28rpx;
        color: #666;
		
      }
	  
    }
  }
}

/* 用户评论 */
.comments-section {
	.section-header{
	  display: flex;
	  justify-content: space-between; 
	}
  .comments-list {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    
    .comment-item {
      //display: flex;
      gap: 24rpx;
	  .comment-user{
		  width: 100%; 
		  gap: 20rpx;
		  display: flex;
		  align-items: center;
		  justify-content:flex-start;
		  .comment-avatar {
		    width: 80rpx;
		    height: 80rpx;
		    border-radius: 50%;
		    overflow: hidden;
		    flex-shrink: 0;
		    
		    image {
		      width: 100%;
		      height: 100%;
		      object-fit: cover;
		    }
		  }
		  .comment-date{
			  margin-left: auto; 
		  }
		  .username {
		    font-size: 28rpx;
		    
		    color: #666666;
		  }
		  
		  .comment-date {
		    font-size: 28rpx;
		    color: #666666;
		  	margin-left: auto; 
		  }
		  
	  }
      
      .comment-content {
        flex: 1;
		padding:20rpx 0rpx;
        .comment-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
		  font-weight: 500;
        }
      }
    }
  }
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 30rpx;
  display: flex;
  gap: 30rpx;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  
  .add-cart-btn {
    flex: 1;
    height: 90rpx;
    background: white;
    // border: 2rpx solid #ed65672e;
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background: #fef5f5;
    }
    
    .btn-icon {
      font-size: 24rpx;
      // color: #ED6567;
	  color: #333333;
	  font-weight: bold;
    }
    
    .btn-text {
      font-size: 24rpx;
      color: #333333;
      font-weight: bold;
    }
  }
  
  .buy-now-btn {
    flex: 1.6;
    height: 90rpx;
    background: #ED6567;
    color: white;
    border: none;
    border-radius: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    
    &:hover {
      background: #d55a5c;
    }
  }
}

</style>